<template>
  <div style="height: 250px" ref="nesting">
  </div>
</template>
<script>
export default {
  data() {
    return {
      charts: '',
      xList: [],
      yList: [],
      title: '',
    }
  },
  computed: {
    options() {
      return {
        title: {
          text: this.title,
          textStyle: {
            color: '#000000',
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br/>{a}:{c}m'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          axisLabel: {
            show: false //y轴线消失
          },
          type: 'category',
          data: this.xList
        },
        series: [
          {
            name: "边坡高度",
            type: 'bar',
            data: this.yList,
            label: {
              normal: {
                show: true,
                padding: [3, 6],
                position: 'center', //标签的位置
                textStyle: {
                  color: '#ffffff',
                  fontWeight: 300,
                  fontSize: 10    //文字的字体大小
                },
                formatter: '{b}',
              }
            },
          }
        ]
      }
    }
  },
  methods: {
    updateEchart(title, data) {
      this.title = title
      this.xList = data ? data.name : data
      this.yList = data ? data.value : data
      this.charts.setOption(this.options)
      this.charts.resize()
    },
    // echart随着窗口改变
    echartResize() {
      this.charts.resize()
    },
  },
  mounted() {
    const Echarts = require('echarts')
    this.charts = Echarts.init(this.$refs.nesting, null, {locale: 'ZH'})
  },
}
</script>
